<template>
	<view>
		<view class="list-box" v-for="(item, index) in list">
			<view class="header-box">
				<view class="status">{{ status }}</view>
				<view class="price">{{ item.price }}</view>
			</view>
			<view class="content-box">
				<!-- 此处用男寝还是女寝去做一个三元判断就行了 -->
				<view class="title flex items-center justify-between">
					<!-- <view>#送餐到寝#</view> -->
					<view v-if="item.comSchoolBuilding.type == 0" class="isWoman" :class=" { isMan : false }">女寝<u-icon :name="'woman'"></u-icon>
					</view>
					<view v-if="item.comSchoolBuilding.type == 1" class="isWoman" :class=" { isMan : true }">男寝<u-icon :name="'man'"></u-icon>
					</view>
					<view v-if="item.comSchoolBuilding.type == 2" :class=" { isMan : false }">混寝</view>
				</view>
				<view class="flex items-start mt-24" >
					<view class="status-start">取</view>
					<view class="info-box">
						<view class="store-name overSize" @tap="callTel(item.shopInfo.phone)"><u-icon
								 class="pr-12" name="phone-fill" />{{ item.shopInfo.name }}
						</view>
						<view class="address-name">{{ item.shopInfo.comSchool.name }}</view>
						<view class="address-name">{{ item.shopInfo.address }}</view>
					</view>
				</view>
				<view class="flex items-start mt-24">
					<view class="status-end">送</view>
					<view class="info-box">
						<view class="store-name" @tap="callTel(item.phon)">
							<u-icon class="pr-16" name="phone-fill" />{{ item.userInfo.name }}
						</view>
						<view class="address-name">手机号：{{ item.phone }}</view>
						<view class="address-name">{{item.comSchool.name }}</view>
						<view class="address-name">{{item.comSchoolBuilding.name }} {{ item.userAddress }}</view>
					</view>
				</view>
			</view>
			<view class="flex justify-between mt-24" v-if="current === 0 || current === 1">
				<!-- 两个按钮不会同时存在，被抢单之后才会消失 -->
				<view style="opacity: 0;">样式占位符</view>
				<view v-if="current === 1" class="revokeOrder" hover-stay-time="150" hover-class="hover-class">撤销订单
				</view>
				<!-- 因为用的弹性盒子，所以此处需要一个占位符 -->
				<view v-if="current === 0" class="grabOrder" hover-stay-time="150" hover-class="hover-class" @click="robOrderTakeawayToDeliveryData(item)">抢单
				</view>
				<!-- 因为用的弹性盒子，所以此处需要一个占位符 -->
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'orderList',
		// 对接口的时候这儿删除就行了
		data() {
			return {
				orderList:[],//订单数据
				man: true
			}
		},
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			current: {
				type: [Number, String],
				default: 0
			}
		},
		computed: {
			status() {
				let statusText;
				switch (this.current) {
					case 0:
						statusText = '待取单'
						break;
					case 1:
						statusText = '服务中'
						break;
					case 2:
						statusText = '已完成'
						break;
					case 3:
						statusText = '已取消'
						break;
					default:
						statusText = '未知状态'
						break;
				}
				return statusText;
			}
		},
		
		methods: {
			//配送员确认完成
			okOrderTakeawayToDeliveryData(row){
				this.$u.api.okOrderTakeawayToDelivery(row).then(res=>{
					this.$emit("getOrderTakeawayData");
				}).then(async res => {
					
				})
			},
			//配送员抢单
			robOrderTakeawayToDeliveryData(row){
				let user =  uni.getStorageSync('userInfo');
				console.log('user',user);
				row.deliveryId =user.id;
				this.$u.api.robOrderTakeawayToDelivery(row).then(res=>{
					this.$emit("getOrderTakeawayData");
				}).then(async res => {
					
				})
			},
			
			// 拨打电话
			callTel(tel) {
				if (!(this.current === 0 || this.current == 1)) return false;
				// #ifndef H5
				uni.makePhoneCall({
					phoneNumber: tel,
					success: function() {
						uni.showToast({
							title: '请稍等，拨通中',
							duration: 1200
						});
					},
					fail: function() {
						uni.showToast({
							title: '您已取消拨打',
							duration: 1200
						});
					}
				})
				// #endif
				// #ifdef H5
				window.location.href = 'tel:'+ tel;
				// #endif
			},
			
		}
	}
</script>

<style lang="scss">
	.list-box {
		box-shadow: 0 2rpx 16rpx rgba($color: #333, $alpha: .2);
		margin: 32rpx;
		border-radius: 8rpx;
		padding: 30rpx;

		.header-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.status {
				font-size: 30rpx;
				font-weight: bold;
			}

			.price {
				font-size: 38rpx;
				color: #fa3d4c;

				&::before {
					content: '¥';
					font-size: 24rpx;
					margin-right: 4rpx;
				}
			}
		}

		.content-box {
			margin-top: 24rpx;
			background: linear-gradient(to right, #f6f6f6, #ffffff);
			border-radius: 8rpx;
			padding: 24rpx;

			.title {
				border-bottom: 1rpx dashed #eaeaea;
				padding-bottom: 12rpx;

				.isMan {
					color: #8DA0FE !important;
				}

				.isWoman {
					color: #FF8C8F;
				}
			}

			.status-start {
				background-color: #5066ee;
				color: #ffffff;
				border-radius: 16rpx;
				font-size: 24rpx;
				padding: 4rpx 8rpx;
				display: inline-block;
				position: relative;
				z-index: 3;

				&::after {
					content: '';
					position: absolute;
					border-left: 2rpx dashed #999999;
					width: 1rpx;
					height: 40rpx;
					bottom: -36rpx;
					right: 42%;
					transform: translateX(-50%);
					z-index: 1;
				}
			}

			.status-end {
				background-color: #f0be58;
				color: #ffffff;
				border-radius: 16rpx;
				font-size: 24rpx;
				padding: 4rpx 8rpx;
				display: inline-block;
				position: relative;
				z-index: 3;

				&::before {
					content: '';
					position: absolute;
					border-left: 2rpx dashed #999999;
					width: 1rpx;
					height: 40rpx;
					top: -36rpx;
					right: 42%;
					transform: translateX(-50%);
					z-index: 1;
				}
			}
		}

		.info-box {
			margin-top: 8rpx;
			margin-left: 24rpx;

			.store-name {
				font-size: 32rpx;
				font-weight: bold;
			}

			.address-name {
				color: #999;
			}

			.overSize {
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}

		.revokeOrder {
			font-size: 30rpx;
			padding: 12rpx 24rpx;
			border-radius: 50rpx;
			border: 1rpx solid #d8d8d8;
		}

		.grabOrder {
			background: linear-gradient(to right, #5375f4, #555ff5);
			color: #ffffff;
			font-size: 30rpx;
			padding: 12rpx 24rpx;
			border-radius: 50rpx;
			border: 1rpx solid #555ff5;
		}
	}
</style>